<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link href="js/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="js/layui/layui.all.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal" role="form">
    <div class="form-horizontal">
        <label class="">量子粒子群参数：</label>
        <div class="form-inline ">
            <label class="" for="lizi">粒子总数：</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control input-sm" id="lizi"
                   placeholder="粒子总数">&nbsp;&nbsp;&nbsp;
            <label class="" for="diedai">迭代次数：</label>
            <input type="text" class="form-control input-sm" id="diedai"
                   placeholder="迭代次数">
        </div>
    </div>
    <div class="form-horizontal">
        <label class="">待优化超参数取值范围：</label>
        <div class="form-inline">
            <label class="" for="lizi">时间步长：</label>&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control input-sm" id="buchang"
                   placeholder="最小值">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control input-sm" id="maxbuchang"
                   placeholder="最大值">
        </div>
        <div class="form-inline">
            <label class="" for="lizi">第一层节点：</label>
            <input type="text" class="form-control" id="diyi"
                   placeholder="最小值">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control" id="diyimax"
                   placeholder="最大值">
        </div>
        <div class="form-inline">
            <label class="" for="lizi">第二层节点：</label>
            <input type="text" class="form-control" id="dier"
                   placeholder="最小值">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control" id="diermax"
                   placeholder="最大值">
        </div>
        <div class="form-inline">
            <label class="" for="lizi">批处理大小：</label>
            <input type="text" class="form-control" id="chuli"
                   placeholder="最小值">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" class="form-control" id="chulimax"
                   placeholder="最大值">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" class="btn btn-dark" onclick="getResult()" value="提交"></input>

        </div>
    </div>
    <hr/>
</form>
<div id="logInfo" style="overflow:auto;">
</div>
</body>
<script>

    $(function () {
        // 自动建立socket连接
        socketServer();
        $("#logInfo").empty();
    })


    function socketServer() {
        index = new WebSocket("ws://localhost:14028/webgis/websocket/2");
        //打开事件
        index.onopen = function () {
            console.log("Socket 已打开");
        };

        //获得消息事件
        index.onmessage = function (msg) {
            console.log(msg.data);
            $("#logInfo").append("<span class='logp'>" + msg.data + "</span><br/>");
            document.getElementById("logInfo").scrollIntoView(false)
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        index.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        index.onerror = function () {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }

    function getResult() {
        layer.load(1);
        //此处演示关闭
        setTimeout(function () {
            layer.closeAll('loading');
        }, 2000);
        getData()
    }

    function getData() {
        $.ajax({
            url: "http://127.0.0.1:14028/webgis/njod/qpso" + "/2",
            type: "GET",
            async: true,
            success: function (data) {
                layer.msg(data.code)
                console.log('成功发送QPSO优化请求')
            }
        });
    }

</script>
</html>